<template>
  <div class="app-container">

    <!-- 异常登录时间配置 -->
    <el-dialog title="回收时间配置" :visible.sync="configOpen" width="800px" append-to-body>
      <el-form ref="configForm" :model="configForm" label-width="80px">
        <el-form-item label="周期：">
          <el-checkbox-group v-model="configForm.info.weekConfig">
            <el-checkbox v-for="week in this.weekList" :label="week" :key="week" :name="week"></el-checkbox>
          </el-checkbox-group>
          <!--          <el-input v-model="configForm.bz" placeholder="请填写记录信息"/>-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitConfig">确 定</el-button>
        <el-button @click="configOpen = false">取 消</el-button>
      </div>
    </el-dialog>


    <el-form class="main-search">
      <el-row>
        <el-divider content-position="left">自动轮转</el-divider>
        <el-form-item label="回收开关" label-width="140px">
          <el-switch
              v-model="recoverFlag.configValue"
              active-text="打开"
              active-value="1"
              inactive-value="0"
              inactive-text="关闭"
              @change="handleRecoverFlagChange()">
          </el-switch>
          <el-button type="primary" size="mini" @click="submitRecover">配 置</el-button>
        </el-form-item>
        <el-form-item label="轮转开关" label-width="140px">
          <el-switch
              v-model="rotateSwitch.configValue"
              active-text="打开"
              active-value="1"
              inactive-value="0"
              inactive-text="关闭"
              @change="handleRotateSwitchChange()">
          </el-switch>
        </el-form-item>
        <el-form-item label="轮转类型" label-width="140px">
          <el-switch
              v-model="rotateType.configValue"
              active-text="客户池"
              active-value="pool"
              inactive-value="staff"
              inactive-text="业务员"
              @change="handleRotateTypeChange()">
          </el-switch>
        </el-form-item>
      </el-row>
      <el-row>
        <el-divider content-position="left" class="gap-top">客户</el-divider>
        <el-form-item label="VIP客户数量" label-width="140px">
          <el-input-number :precision="0" :controls="false" v-model="vipNum.configValue"
                           style="max-width: 100px; margin-right: 5px"></el-input-number>
          <el-button type="primary" size="mini" @click="submitVipNum">保存</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <el-divider content-position="left" class="gap-top">备忘录</el-divider>
        <el-form-item label="备忘录提醒" label-width="140px">
          <el-switch
              v-model="memoRecord.configValue"
              active-text="打开"
              active-value="1"
              inactive-value="0"
              inactive-text="关闭"
              @change="submitMemoRecord()">
          </el-switch>
        </el-form-item>
      </el-row>
      <el-row>
        <el-divider content-position="left" class="gap-top">点评</el-divider>
        <el-form-item label="点评提醒" label-width="140px">
          <el-switch
              v-model="iPInfo.commentRecord"
              active-text="打开"
              active-value="1"
              inactive-value="0"
              inactive-text="关闭"
              @change="submitCommentRecord()">
          </el-switch>
        </el-form-item>
      </el-row>
      <el-row>
        <el-divider content-position="left" class="gap-top">IP授权</el-divider>
        <el-form-item label="IP授权" label-width="140px">
          <el-switch
              v-model="iPInfo.configValue"
              active-text="打开"
              active-value="1"
              inactive-value="0"
              inactive-text="关闭"
              @change="submitIP()">
          </el-switch>
        </el-form-item>
      </el-row>
    </el-form>

    <!--    <el-form-item>-->
    <!--      <div slot="label" class="item-label" :style="{color: color3, borderColor: color3}"><i class="iconfont icon-lishuai"></i>警告</div>-->
    <!--      <el-input-number :precision="0" :controls="false" :min="0" :max="num2Max" v-model="form.num2"></el-input-number> % 以下-->
    <!--    </el-form-item>-->
    <!--    <el-divider content-position="left" class="gap-top">改造对象</el-divider>-->
    <!--    <el-form-item label="改造对象年龄范围：" label-width="140px">-->
    <!--      <el-input-number :precision="0" :controls="false" v-model="form.ageMin"></el-input-number> 岁 ——-->
    <!--      <el-input-number :precision="0" :controls="false" v-model="form.ageMax"></el-input-number> 岁-->
    <!--      <div>例：若填写70至80，则年龄范围为【70，80】，若填写70至-，则年龄范围为【70，+∞），若填写-至70则年龄范围为（0，70】，若都不填，则年龄范围不限。默认不填</div>-->
    <!--    </el-form-item>-->

    <!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
    <!--        <el-form-item label="参数名称" prop="configName">-->
    <!--          <el-input v-model="form.configName" placeholder="请输入参数名称" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="参数键名" prop="configKey">-->
    <!--          <el-input v-model="form.configKey" placeholder="请输入参数键名" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="参数键值" prop="configValue">-->
    <!--          <el-input v-model="form.configValue" placeholder="请输入参数键值" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="系统内置" prop="configType">-->
    <!--          <el-radio-group v-model="form.configType">-->
    <!--            <el-radio-->
    <!--              v-for="dict in dict.type.sys_yes_no"-->
    <!--              :key="dict.value"-->
    <!--              :label="dict.value"-->
    <!--            >{{dict.label}}</el-radio>-->
    <!--          </el-radio-group>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="备注" prop="remark">-->
    <!--          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
    <!--        <el-button @click="cancel">取 消</el-button>-->
    <!--      </div>-->
  </div>
</template>

<script>
import {listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache} from "@/api/system/config";
import {noListConfig, saveConfig} from "@/api/system/loginRecord/config";

export default {
  name: "Config",
  dicts: ['sys_yes_no'],
  data() {
    return {
      // 遮罩层
      loading: false,
      rotateSwitch: {},
      // 回收标识
      recoverFlag: {},
      // 轮转类型
      rotateType: {},
      // 重要客户
      vipNum: {},
      // 备忘录提醒
      memoRecord: {},
      // IP授权
      iPInfo: {},
      // 点评提醒
      commentRecord: {},
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        configName: undefined,
        configKey: undefined,
        configType: undefined
      },
      configOpen: false,
      configForm: {
        type: 'recover_time',
        info: {
          weekConfig: []
        }
      },
      weekList: [
        '周一',
        '周二',
        '周三',
        '周四',
        '周五',
        '周六',
        '周日',
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     *
     */
    getList() {
      this.loading = true;
      listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            let configList = response.rows;
            configList.forEach(item => {
              if (item.configKey === 'recover.customer.flag') {
                this.recoverFlag = item
              }
              if (item.configKey === 'rotate.customer.type') {
                this.rotateType = item
              }
              if (item.configKey === 'max.vip.number') {
                this.vipNum = item
              }
              if (item.configKey === 'memo.record.remind') {
                this.memoRecord = item;
              }
              if (item.configKey === 'ip.info.record') {
                this.iPInfo = item;
              }
              if (item.configKey === 'comment.record.info') {
                this.commentRecord = item;
              }
              if (item.configKey === 'rotate.customer.switch') {
                this.rotateSwitch = item
              }
            })
            this.total = response.total;
            this.loading = false;
          }
      );
    },
    /** 设置 */
    handleRecoverFlagChange() {
      updateConfig(this.recoverFlag).then(resp => {
        this.$modal.msgSuccess("设置成功");
      })
    },
    handleRotateSwitchChange() {
      updateConfig(this.rotateSwitch).then(resp => {
        this.$modal.msgSuccess("设置成功");
      })
    },

    handleRotateTypeChange() {
      updateConfig(this.rotateType).then(resp => {
        this.$modal.msgSuccess("设置成功");
      })
    },
    submitVipNum() {
      updateConfig(this.vipNum).then(resp => {
        this.$modal.msgSuccess("设置成功");
      })
    },
    submitMemoRecord() {
      updateConfig(this.memoRecord).then(resp => {
        this.$modal.msgSuccess("设置成功");
      })
    },
    submitIP() {
      updateConfig(this.iPInfo).then(resp => {
        this.$modal.msgSuccess("设置成功");
      })
    },
    submitCommentRecord() {
      updateConfig(this.commentRecord).then(resp => {
        this.$modal.msgSuccess("设置成功");
      })
    },
    // 配置回收日期
    submitRecover() {
      // 查询配置信息--
      const param = {
        type: 'recover_time'
      }
      this.configForm = {
        type: 'recover_time',
        info: {
          weekConfig: []
        }
      };
      noListConfig(param).then(res => {
        if (res.code == 200) {
          const list = res.data;
          if (list.length > 0) {
            this.configForm = list[0];
            this.configForm.info = JSON.parse(this.configForm.info, this.configForm.info);
          }
        }
      });
      this.configOpen = true;
    },

    submitConfig() {
      this.$refs["configForm"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          const data = {
            ...this.configForm,
            info: JSON.stringify(this.configForm.info)
          }
          saveConfig(data).then(res => {
            this.$modal.msgSuccess("配置成功");
            this.configOpen = false;
          }).finally(() => {
            this.buttonLoading = false;
          })
        }
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        configId: undefined,
        configName: undefined,
        configKey: undefined,
        configValue: undefined,
        configType: "Y",
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加参数";
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.configId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const configId = row.configId || this.ids
      getConfig(configId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改参数";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.configId != undefined) {
            updateConfig(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addConfig(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const configIds = row.configId || this.ids;
      this.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
        return delConfig(configIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/config/export', {
        ...this.queryParams
      }, `config_${new Date().getTime()}.xlsx`)
    },
    /** 刷新缓存按钮操作 */
    handleRefreshCache() {
      refreshCache().then(() => {
        this.$modal.msgSuccess("刷新成功");
      });
    }
  }
};
</script>
